<template>
  <div>
    <a-form ref="formRef">

      <!--动态表单循环-->
      <a-space align="baseline" v-for="(item, index) in array" style="display: flex; ">

        <a-form-item label="X"
                     :name="['array',index, 'x']"
                     :rules="{required: true,message: '必填项',trigger: 'blur'}"
        >
          <a-input v-model:value="item.x"></a-input>
        </a-form-item>

        <a-form-item label="Y"
                     :name="['array',index, 'y']"
                     :rules="{required: true,message: '必填项',trigger: 'blur'}"
        >
          <a-input v-model:value="item.y"></a-input>
        </a-form-item>

        <!--删除-->
        <MinusCircleOutlined @click="removeSight(array,item)" class="_hover_color_red_"/>
      </a-space>


      <!--添加-->
      <a-form-item>
        <a-button type="dashed" block @click="addSight(array)">
          <PlusOutlined/>
          添加
        </a-button>
      </a-form-item>

    </a-form>
  </div>
</template>
<script>

import {defineComponent} from 'vue';
import Breadcrumb from "@/common/layout/Breadcrumb.vue";

export default defineComponent({
  components: {Breadcrumb},
  mounted() {
  },
  //数据
  data() {
    return {
      array: [],
    }
  },
  //方法
  methods: {
    removeSight(list, item) {
      let index = list.indexOf(item);
      if (index !== -1) {
        list.splice(index, 1);
      }
    },
    addSight(list) {
      list.push({
        x: undefined,
        y: undefined,
      });
    },
  }

});
</script>


